<template>
  <div>
    <!-- vuetify组件库暂无相应的tab切换组件 改动原组件极费时间 -->
    <v-container class="grey">
      <v-row no-gutters>
        <v-col cols="12" z sm="6">
          <!-- 配置国际化不可使用响应式变量循环 -->
          <div
            v-ripple
            :class="actionItem === 1 ? 'tabs-item action_item' : 'tabs-item'"
            @click="handleActionItem(1)"
          >
            SCT Staking
          </div>
        </v-col>
        <v-col cols="12" z sm="6">
          <div
            v-ripple
            :class="actionItem === 2 ? 'tabs-item action_item' : 'tabs-item'"
            @click="handleActionItem(2)"
          >
            {{ $t("Page.Staking.supplier") + " Staking" }}
          </div>
        </v-col>
      </v-row>
    </v-container>
    <div class="item-content">
      <SCT v-if="actionItem === 2" />

      <Supplier v-if="actionItem === 1" />
    </div>

    <connect-wallet-dialog ref="connectWallet" />
  </div>
</template>

<script>
import ConnectWalletDialog from "@/views/dialog/walletDialog.vue";
import SCT from "./SCT/index.vue";
import Supplier from "./supplier/index.vue";
import { mapState } from "vuex";
import { InitPledgeContract, BigNumberToString } from "../../utils/wallet";
export default {
  components: { SCT, Supplier, ConnectWalletDialog },
  data() {
    return {
      actionItem: 1,
    };
  },
  computed: {
    ...mapState(["ethAddress"]),
  },
  mounted() {
    setTimeout(() => {
      if (!this.ethAddress) {
        console.log(this.$refs);
        this.$refs.connectWallet.isOpen = true;
      }
    }, 2000);
  },
  methods: {
    async handleActionItem(item) {
      // this.actionItem = item;
    },
  },
};
</script>

<style lang="scss" scoped>
.grey {
  width: 400px;
  padding: 0;
  margin: 0;
  border: 1px solid #aa8151;
  cursor: pointer;
}

.tabs-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 40px;
  color: #aa8151;
}

.tabs-item:hover {
  background: #f2eded;
}

.action_item {
  color: #fff;
  background: #aa8151 !important;
}

.item-content {
  padding: 20px 0;
}
</style>
